<template>
  <div>
    <div class="single-module">
      <div class="preview-section">
        <div class="preview-section__title">
          <div class="text">{{ topTitle }}</div>
        </div>
        <img :src="info.cover_image" style="width: 100%; height: 164px" v-if="info.cover_image" />

        <div class="preview-section__desc">{{ info.intro }}</div>
        <div class="preview-section__detail">
          <div class="detail__title">{{ bottomTips }}</div>
          <div v-html="copyDetails"></div>
          <!--<div v-if="leftorganizationDetails.length > 0">
            <div class="detail__content" v-for="(item, index) in leftorganizationDetails" :key="index">
              <div class="insititution-list__item text" v-html="item.content" v-if="item.type == 'text'"></div>
              <div v-if="item.type == 'picture'">
                <img
                  :src="item.content"
                  style="width: 100%; min-height: 150px; border-radius: 5px; margin-bottom: 5px"
                />
              </div>
              <div v-if="item.type == 'video'">
                <video
                  :src="item.content"
                  style="width: 100%; min-height: 150px; border-radius: 5px; margin-bottom: 5px"
                  controls="controls"
                ></video>
              </div>
            </div>
          </div>
          <div v-else style="margin-top: 20px; text-align: center">
            <img src="~@/assets/img/website/23.png" style="width: 94px; height: 94px" />
            <div>暂无内容</div>
          </div> -->
        </div>
      </div>
      <div class="edit-section">
        <div class="edit-section__content">
          <div class="cover__title">封面介绍</div>
          <div class="cover__content" style="margin-top: 12px; padding-left: 14px">
            <div class="cover__content__img">
              <span>封面图:</span>
              <div style="margin-left: 10px">
                <a-upload
                  :beforeUpload="coverImageBeforeUpload"
                  class="upload-list-inline"
                  :showUploadList="false"
                  style="cursor: pointer"
                >
                  <div class="img__inner">
                    <img :src="info.cover_image" class="image" v-if="info.cover_image" />
                    <div
                      v-else
                      style="width: 223px; height: 80px; border-radius: 4px; text-align: center; line-height: 80px;
                          border: 1px solid #e8e8e8;"
                    >
                      未上传封面
                    </div>
                    <div class="text">{{info.cover_image?'更换':'上传'}}</div>
                  </div>
                </a-upload>
              </div>
            </div>
            <div class="cover__content__desc">
              <div style="width: 56px">简介:</div>
              <div>
                <a-textarea
                  placeholder="请填写简介,30字以内"
                  style="width: 230px"
                  :maxLength="30"
                  v-model="info.intro"
                />
              </div>
            </div>
          </div>
          <div class="edit-section__detail">
            <div class="detail__title">{{ bottomTips }}</div>
            <div style="margin-top: 10px">
              <div style="width: 80px; height: 80px; display: none">
                <a-upload class="upload-list-inline" :showUploadList="false" :before-upload="beforeUpload">
                  <div id="editonload">
                    <a-icon type="picture" style="font-size: 20px" />
                  </div>
                </a-upload>
                <div style="text-align: center; font-size: 14px; color: #666">添加图片</div>
              </div>
              <div style="height: 200px">
                <quill-editor
                  v-model="info.details"
                  ref="QuillEditor"
                  :options="editorOption"
                  style="height: 200px; width: 500px"
                  @change="quillChange"
                />
              </div>
            </div>
          </div>
          <!-- <div style="color: #999; margin-top: 50px">
            支持添加文本、图片（jpg、png格式，不超过5M，最多9张）、视频（mp4格式，不超过80M，最多1个）
          </div> -->
        </div>
        <div class="edit-section__footer">
          <a-button type="primary" @click="save">保存</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { introSetting, introGetSetting } from '@/api/websiteCreate'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { uploadPic } from '@/api/login'
export default {
  props: ['topTitle', 'bottomTips', 'info'],
  components: { quillEditor },
  data() {
    return {
      editorOption: {
        placeholder: '请输入',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              // [{ size: ['small', false, 'large', 'huge'] }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }],
              ['image', 'video'],
            ],
            handlers: {
              image: (value) => {
                if (value) {
                  console.log(456)
                  // document.querySelector('.upload-list-inline').click()
                  document.getElementById('editonload').click()
                } else {
                  //   this.quill.format('image', false)
                  this.$message.error('上传发生未知错误!')
                }
              },
              video: (value) => {
                if (value) {
                  document.getElementById('editonload').click()
                } else {
                  this.$message.error('上传发生未知错误!')
                }
              },
            },
          },
        },
      },
      school_id: this.$store.state.user.school,
      copyDetails: '',
      //   info: {
      //     cover_image: '',
      //     intro: '',
      //     details: '',
      //   },
    }
  },
  created() {
    // this.getSet()
  },
  methods: {
    // getSet() {
    //   introGetSetting({ school_id: this.school_id, key: 'brand_introduction' })
    //     .then((res) => {
    //       this.info.cover_image = res.value.cover_image
    //       this.info.intro = res.value.intro
    //       this.info.details = res.value.info
    //     })
    //     .catch((err) => {
    //       this.$message.error(err.data.message || '获取失败')
    //     })
    // },
    coverImageBeforeUpload(file) {
      let isPicture =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/svg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/gif'
      if (!isPicture) {
        this.$message.error('只能上传图片！')
        return
      }
      let pictureSize = 10 * 1024 * 1024
      if (file.size > pictureSize) {
        this.$message.error('图片文件大于10M！')
        return
      }
      let formData = new FormData()
      formData.append('file', file)
      uploadPic(formData)
        .then((res) => {
          this.info.cover_image = res.url
          // console.log(res)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上传失败,请检查上传文件或稍后重试')
        })
      return false
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/svg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/gif' ||
        file.type === 'video/ogg' ||
        file.type === 'video/flv' ||
        file.type === 'video/avi' ||
        file.type === 'video/wmv' ||
        file.type === 'video/mov' ||
        file.type === 'video/mp4'
      if (!isJpgOrPng) {
        this.$message.error('只能上传图片/视频！')
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      formData.append('school_id', this.$store.state.user.school)
      let quill = this.$refs.QuillEditor.quill
      uploadPic(formData)
        .then((res) => {
          let length = quill.getSelection().index
          if (
            file.type === 'image/jpeg' ||
            file.type === 'image/png' ||
            file.type === 'image/svg' ||
            file.type === 'image/jpg' ||
            file.type === 'image/gif'
          ) {
            quill.insertEmbed(length, 'image', res.url)
          } else {
            quill.insertEmbed(length, 'video', res.url)
          }
          quill.setSelection(length + 1)
          this.info.details = this.info.details.replace(/<img/g, '<img style="width:100%;"')
          this.copyDetails = this.info.details
          // console.log(this.info.details);
          // this.$forceUpdate()
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上传失败')
        })
      return false
    },
    quillChange(e) {
      this.info.details = this.info.details.replace(/<img/g, '<img style="width:100%;"')
      this.info.details = this.info.details.replace(/<iframe/g, '<iframe style="width:100%;"')
      this.copyDetails = this.info.details
    },
    save() {
      this.$emit('finish')
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/img/customFormIcon/iconfont.css';
.mt25 {
  margin-top: 25px;
}
.single-module {
  display: flex;
}
.preview-section {
  width: 320px;
  max-height: 600px;
  overflow-y: auto;
  padding: 3px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  background-color: #f0f2f5;
  .preview-section__title {
    width: 100%;
    height: 55px;
    text-align: center;
    background-size: 100% 100%;
    background-image: url('~@/assets/img/website/22.png');
    position: relative;
    .text {
      position: absolute;
      left: 50%;
      bottom: 8px;
      transform: translate(-50%);
      font-weight: 500;
    }
  }
  .preview-section__desc {
    min-height: 42px;
    line-height: 20px;
    padding: 10px 14px;
    background-color: #fff;
  }
  .preview-section__detail {
    min-height: 300px;
    margin-top: 10px;
    padding: 0 14px 14px;
    background-color: #fff;
    .detail__title {
      height: 42px;
      line-height: 42px;
      font-size: 15px;
      font-weight: 500;
    }
    .detail__content {
      .insititution-list__item {
        line-height: 18px;
        color: #96a1ae;
        font-size: 13px;
        margin-bottom: 10px;
        font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
      }
    }
  }
}
.edit-section {
  width: 628px;
  max-width: 628px;
  height: fit-content;
  border: 1px solid #e8e8e8;
  padding: 24px 0 0 24px;
  margin: 0 0 0 40px;
  .edit-section__content {
    max-height: calc(100vh - 423px);
    overflow: auto;
    .cover__title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
    .cover__content {
      .cover__content__img {
        display: flex;
      }
    }
  }
}
.img__inner {
  position: relative;
  .image {
    width: 223px;
    height: 114px;
    border-radius: 4px;
  }
  .text {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
  }
}
.cover__content__desc {
  margin-top: 10px;
  display: flex;
}
.edit-section__detail {
  margin-top: 16px;
  .detail__title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  .content {
    margin-top: 8px;
    position: relative;
    .content-item {
      width: 300px;
      margin-bottom: 12px;
      display: flex;
      position: relative;
    }
  }
  .operate {
    display: flex;

    .operate-item {
      margin-right: 5px;
      text-align: center;
      cursor: pointer;

      .operate-select-area-up {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border: 1px dashed #e8e8e8;
        margin-bottom: 4px;
      }
      .text {
        text-align: center;
        font-size: 14px;
        color: #666;
      }
    }
  }
}
.edit-section__footer {
  height: 48px;
  line-height: 48px;
  padding-left: 24px;
  margin: 16px 0 0 -24px;
  border: none;
  border-top: 1px solid #e8e8e8;
}
.little-icon {
  position: absolute;
  right: -23px;
  top: 0;
  cursor: pointer;
}
.little-icon-down {
  position: absolute;
  right: -23px;
  top: 45px;
  cursor: pointer;
}
.little-icon-up {
  position: absolute;
  right: -23px;
  top: 24px;
  cursor: pointer;
}
.top {
  top: 24px !important;
}
</style>